<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>活动参与详情 - 用户中心</title>
    <!-- 引入外部资源 -->
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
    
    <!-- 引入自定义样式 -->
    <link rel="stylesheet" href="activity-detail.css">
</head>
<body class="font-inter bg-gray-50 text-dark min-h-screen flex flex-col">
    <!-- 导航栏 -->
    <header class="bg-white shadow-sm sticky top-0 z-50">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between h-16">
                <!-- 左侧Logo和导航 -->
                <div class="flex items-center">
                    <div class="flex-shrink-0 flex items-center">
                        <i class="fa fa-connectdevelop text-primary text-2xl mr-2"></i>
                        <span class="font-bold text-xl text-primary">UserHub</span>
                    </div>
                    <nav class="hidden md:ml-10 md:flex md:space-x-8">
                        <a href="dashboard.html" class="text-gray-500 hover:text-primary hover:border-primary inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium transition-colors duration-200">
                            首页
                        </a>
                        <a href="messages.html" class="text-gray-500 hover:text-primary hover:border-primary inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium transition-colors duration-200">
                            消息
                        </a>
                        <a href="tasks.html" class="text-gray-500 hover:text-primary hover:border-primary inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium transition-colors duration-200">
                            任务
                        </a>
                        <a href="settings-profile.html" class="text-gray-500 hover:text-primary hover:border-primary inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium transition-colors duration-200">
                            设置
                        </a>
                    </nav>
                </div>
                
                <!-- 右侧用户区域 -->
                <div class="flex items-center">
                    <button class="p-2 rounded-full text-gray-500 hover:text-primary hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary mr-2 transition-colors duration-200">
                        <i class="fa fa-search"></i>
                    </button>
                    
                    <a href="messages.html" class="p-2 rounded-full text-gray-500 hover:text-primary hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary relative mr-2 transition-colors duration-200">
                        <i class="fa fa-bell"></i>
                        <span class="absolute top-1 right-1 block h-2 w-2 rounded-full bg-red-500 ring-2 ring-white"></span>
                    </a>

                    <div class="ml-3 relative">
                        <div>
                            <button type="button" class="flex items-center max-w-xs rounded-full text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary" id="user-menu-button">
                                <img class="h-8 w-8 rounded-full object-cover" src="https://picsum.photos/id/64/200/200" alt="用户头像" id="header-avatar">
                                <span class="ml-2 hidden md:block text-sm font-medium text-gray-700" id="user-display-name">张三</span>
                                <i class="fa fa-chevron-down ml-1 text-xs text-gray-500 hidden md:block"></i>
                            </button>
                        </div>
                    </div>
                        
                    <div class="user-menu-dropdown hidden absolute right-0 mt-2 w-48 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 z-50" id="user-menu-dropdown">
                        <div class="py-1">
                            <button class="user-menu-item w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" onclick="window.location.href='settings-profile.html'">
                                <i class="fa fa-user-circle mr-2"></i>个人资料
                            </button>
                            <button class="user-menu-item w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" onclick="window.location.href='settings-security.html'">
                                <i class="fa fa-lock mr-2"></i>账户安全
                            </button>
                            <button class="user-menu-item w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" onclick="window.location.href='settings-notifications.html'">
                                <i class="fa fa-bell mr-2"></i>通知设置
                            </button>
                            <div class="border-t border-gray-100 my-1"></div>
                            <button class="user-menu-item w-full text-left px-4 py-2 text-sm text-red-500 hover:bg-gray-100" id="logout-button">
                                <i class="fa fa-sign-out mr-2"></i>退出登录
                            </button>
                        </div>
                    </div>
                    
                    <button type="button" class="ml-4 md:hidden inline-flex items-center justify-center p-2 rounded-md text-gray-500 hover:text-primary hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary" id="mobile-menu-button">
                        <i class="fa fa-bars"></i>
                    </button>
                </div>
            </div>
        </div>
        
        <div class="md:hidden hidden" id="mobile-menu">
            <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
                <a href="dashboard.html" class="text-gray-500 hover:bg-gray-50 hover:text-primary hover:border-primary block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium">
                    首页
                </a>
                <a href="messages.html" class="text-gray-500 hover:bg-gray-50 hover:text-primary hover:border-primary block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium">
                    消息
                </a>
                <a href="tasks.html" class="text-gray-500 hover:bg-gray-50 hover:text-primary hover:border-primary block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium">
                    任务
                </a>
                <a href="settings-profile.html" class="text-gray-500 hover:bg-gray-50 hover:text-primary hover:border-primary block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium">
                    设置
                </a>
            </div>
        </div>
    </header>

    <!-- 主内容区域 -->
    <main class="flex-grow">
        <!-- 页面标题区 -->
        <section class="bg-white shadow-sm py-6">
            <div class="container mx-auto px-4 sm:px-6 lg:px-8">
                <div class="flex items-center">
                    <button onclick="window.history.back()" class="text-gray-500 hover:text-primary mr-4 transition-colors">
                        <i class="fa fa-arrow-left"></i>
                    </button>
                    <h1 class="text-2xl font-bold">活动参与详情</h1>
                </div>
            </div>
        </section>
        
        <!-- 活动参与概览 -->
        <section class="py-8 bg-gray-50">
            <div class="container mx-auto px-4 sm:px-6 lg:px-8">
                <!-- 数据卡片 -->
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
                    <div class="bg-white rounded-xl p-6 shadow-sm card-hover">
                        <h3 class="text-gray-500 font-medium mb-2">总参与活动数</h3>
                        <p class="text-3xl font-bold text-primary" id="total-activities">24</p>
                    </div>
                    <div class="bg-white rounded-xl p-6 shadow-sm card-hover">
                        <h3 class="text-gray-500 font-medium mb-2">本月参与</h3>
                        <p class="text-3xl font-bold" id="month-activities">5</p>
                    </div>
                    <div class="bg-white rounded-xl p-6 shadow-sm card-hover">
                        <h3 class="text-gray-500 font-medium mb-2">完成率</h3>
                        <p class="text-3xl font-bold text-green-600" id="completion-rate">87%</p>
                    </div>
                    <div class="bg-white rounded-xl p-6 shadow-sm card-hover">
                        <h3 class="text-gray-500 font-medium mb-2">获得奖励</h3>
                        <p class="text-3xl font-bold text-accent" id="rewards-earned">1,560</p>
                    </div>
                </div>
                
                <!-- 图表区域 -->
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
                    <!-- 参与趋势图 -->
                    <div class="bg-white rounded-xl p-6 shadow-sm">
                        <h3 class="text-lg font-bold mb-6">活动参与趋势 (近6个月)</h3>
                        <div class="h-80">
                            <canvas id="activityTrendChart"></canvas>
                        </div>
                    </div>
                    
                    <!-- 活动类型分布图 -->
                    <div class="bg-white rounded-xl p-6 shadow-sm">
                        <h3 class="text-lg font-bold mb-6">参与活动类型分布</h3>
                        <div class="h-80">
                            <canvas id="activityTypeChart"></canvas>
                        </div>
                    </div>
                </div>
                
                <!-- 最近参与的活动 -->
                <div class="bg-white rounded-xl shadow-sm overflow-hidden">
                    <div class="p-6 border-b border-gray-100 flex justify-between items-center">
                        <h3 class="font-bold text-lg">最近参与的活动</h3>
                        <button class="text-primary hover:text-primary/80 text-sm font-medium transition-colors">
                            查看全部 <i class="fa fa-angle-right ml-1"></i>
                        </button>
                    </div>
                    <div class="divide-y divide-gray-100">
                        <!-- 活动1 -->
                        <div class="p-6 hover:bg-gray-50 transition-colors">
                            <div class="flex flex-col md:flex-row md:items-center justify-between">
                                <div class="flex items-start mb-4 md:mb-0">
                                    <div class="w-16 h-16 rounded-lg overflow-hidden flex-shrink-0 mr-4">
                                        <img src="8 获第32届校运会体育道德风尚奖.jpeg" alt="春季马拉松活动" class="w-full h-full object-cover">
                                    </div>
                                    <div>
                                        <h4 class="font-medium text-lg">春季马拉松公益跑</h4>
                                        <p class="text-sm text-gray-500 mt-1">2025-06-15 08:00 - 11:30</p>
                                        <div class="flex items-center mt-2">
                                            <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full mr-2">已完成</span>
                                            <span class="text-sm text-gray-600"><i class="fa fa-trophy text-yellow-500 mr-1"></i> 获得积分: 300</span>
                                        </div>
                                    </div>
                                </div>
                                <button class="text-primary hover:text-primary/80 text-sm font-medium transition-colors self-center md:self-auto">
                                    查看详情 <i class="fa fa-chevron-right ml-1 text-xs"></i>
                                </button>
                            </div>
                        </div>
                        
                        <!-- 活动2 -->
                        <div class="p-6 hover:bg-gray-50 transition-colors">
                            <div class="flex flex-col md:flex-row md:items-center justify-between">
                                <div class="flex items-start mb-4 md:mb-0">
                                    <div class="w-16 h-16 rounded-lg overflow-hidden flex-shrink-0 mr-4">
                                        <img src="屏幕截图 2025-09-09 152735.png" alt="技术分享会活动" class="w-full h-full object-cover">
                                    </div>
                                    <div>
                                        <h4 class="font-medium text-lg">前端技术分享会</h4>
                                        <p class="text-sm text-gray-500 mt-1">2025-06-08 14:00 - 17:00</p>
                                        <div class="flex items-center mt-2">
                                            <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full mr-2">已完成</span>
                                            <span class="text-sm text-gray-600"><i class="fa fa-trophy text-yellow-500 mr-1"></i> 获得积分: 150</span>
                                        </div>
                                    </div>
                                </div>
                                <button class="text-primary hover:text-primary/80 text-sm font-medium transition-colors self-center md:self-auto">
                                    查看详情 <i class="fa fa-chevron-right ml-1 text-xs"></i>
                                </button>
                            </div>
                        </div>
                        
                        <!-- 活动3 -->
                        <div class="p-6 hover:bg-gray-50 transition-colors">
                            <div class="flex flex-col md:flex-row md:items-center justify-between">
                                <div class="flex items-start mb-4 md:mb-0">
                                    <div class="w-16 h-16 rounded-lg overflow-hidden flex-shrink-0 mr-4">
                                        <img src="4 获校五史短剧故事大赛三等奖.jpg" alt="社区志愿服务活动" class="w-full h-full object-cover">
                                    </div>
                                    <div>
                                        <h4 class="font-medium text-lg">学校表演比赛</h4>
                                        <p class="text-sm text-gray-500 mt-1">2025-05-25 09:00 - 16:00</p>
                                        <div class="flex items-center mt-2">
                                            <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full mr-2">已完成</span>
                                            <span class="text-sm text-gray-600"><i class="fa fa-trophy text-yellow-500 mr-1"></i> 获得积分: 250</span>
                                        </div>
                                    </div>
                                </div>
                                <button class="text-primary hover:text-primary/80 text-sm font-medium transition-colors self-center md:self-auto">
                                    查看详情 <i class="fa fa-chevron-right ml-1 text-xs"></i>
                                </button>
                            </div>
                        </div>
                        
                        <!-- 活动4 -->
                        <div class="p-6 hover:bg-gray-50 transition-colors">
                            <div class="flex flex-col md:flex-row md:items-center justify-between">
                                <div class="flex items-start mb-4 md:mb-0">
                                    <div class="w-16 h-16 rounded-lg overflow-hidden flex-shrink-0 mr-4">
                                        <img src="屏幕截图 2025-09-10 171931.png" alt="百度之心竞赛活动" class="w-full h-full object-cover">
                                    </div>
                                    <div>
                                        <h4 class="font-medium text-lg">百度之心知识竞赛</h4>
                                        <p class="text-sm text-gray-500 mt-1">2025-05-15 00:00 - 23:59</p>
                                        <div class="flex items-center mt-2">
                                            <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full mr-2">已完成</span>
                                            <span class="text-sm text-gray-600"><i class="fa fa-trophy text-yellow-500 mr-1"></i> 获得积分: 100</span>
                                        </div>
                                    </div>
                                </div>
                                <button class="text-primary hover:text-primary/80 text-sm font-medium transition-colors self-center md:self-auto">
                                    查看详情 <i class="fa fa-chevron-right ml-1 text-xs"></i>
                                </button>
                            </div>
                        </div>
                        
                        <!-- 即将参与的活动 -->
                        <div class="p-6 hover:bg-gray-50 transition-colors">
                            <div class="flex flex-col md:flex-row md:items-center justify-between">
                                <div class="flex items-start mb-4 md:mb-0">
                                    <div class="w-16 h-16 rounded-lg overflow-hidden flex-shrink-0 mr-4">
                                        <img src="3 举办学院草坪音乐节.jpeg" alt="夏季草坪音乐毕业节活动" class="w-full h-full object-cover">
                                    </div>
                                    <div>
                                        <h4 class="font-medium text-lg">夏季草坪音乐毕业节</h4>
                                        <p class="text-sm text-gray-500 mt-1">2025-06-22 18:00 - 22:00</p>
                                        <div class="flex items-center mt-2">
                                            <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full mr-2">即将参与</span>
                                            <span class="text-sm text-gray-600"><i class="fa fa-clock-o mr-1"></i> 剩余7天</span>
                                        </div>
                                    </div>
                                </div>
                                <button class="text-primary hover:text-primary/80 text-sm font-medium transition-colors self-center md:self-auto">
                                    查看详情 <i class="fa fa-chevron-right ml-1 text-xs"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- 页脚 -->
    <footer class="bg-white border-t border-gray-200 py-8">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="flex items-center mb-4 md:mb-0">
                    <i class="fa fa-connectdevelop text-primary text-xl mr-2"></i>
                    <span class="font-bold text-lg text-primary">用户中心</span>
                </div>
               <div class="flex space-x-6">
                <a href="https://weixin.qq.com" class="text-gray-400 hover:text-primary transition-colors duration-200" title="微信">
                    <i class="fa fa-weixin text-xl"></i>
                </a>
                <a href="https://im.qq.com/index" class="text-gray-400 hover:text-primary transition-colors duration-200" title="QQ">
                    <i class="fa fa-qq text-xl"></i>
                </a>
                <a href="https://weibo.com/newlogin?tabtype=weibo&gid=102803&openLoginLayer=0&url=https%3A%2F%2Fweibo.com%2F" class="text-gray-400 hover:text-primary transition-colors duration-200" title="微博">
                    <i class="fa fa-weibo text-xl"></i>
                </a>
            </div>
            </div>
            <div class="mt-6 border-t border-gray-200 pt-6 flex flex-col md:flex-row justify-between items-center">
                <p class="text-sm text-gray-500">
                    &copy; 2025 UserHub. 保留所有权利.
                </p>
                <div class="mt-4 md:mt-0 flex space-x-6">
                    <a href="privacy-policy.html" class="text-sm text-gray-500 hover:text-primary transition-colors duration-200">隐私政策</a>
                    <a href="terms-of-service.html" class="text-sm text-gray-500 hover:text-primary transition-colors duration-200">使用条款</a>
                    <a href="help-center.html" class="text-sm text-gray-500 hover:text-primary transition-colors duration-200">帮助中心</a>
                </div>
            </div>
        </div>
    </footer>

    <!-- 引入自定义脚本 -->
    <script src="activity-detail.js"></script>
</body>
</html>
